<template>
  <div class="resultPanel">
    <div class="topDes">
      <div class="left-img">
        <img :src="ccw.error ? (cth.error ? (escf.error ? '暂无' : escf.img) : cth.img) : ccw.img">
      </div>
      <div class="right-des">
        <p>{{ccw.error ? (cth.error ? (escf.error ? '暂无' : escf.condition.curModels.name) : cth.condition.curModels.model_name) : ccw.condition.curModels.name}}</p>
        <p>上牌地区: 
          {{ccw.error ? (cth.error ? (escf.error ? '0' : escf.condition.selectedProvince.name) : cth.condition.selectedProvince.name) : ccw.condition.selectedProvince.name}}
          {{ccw.error ? (cth.error ? (escf.error ? '0' : escf.condition.selectedCity.name) : cth.condition.selectedCity.name) : ccw.condition.selectedCity.name}}
        </p>
        <p>上牌时间: 
          {{ccw.error ? (cth.error ? (escf.error ? '0' : escf.condition.selectedYear) : cth.condition.selectedYear) : ccw.condition.selectedYear}}年
          {{ccw.error ? (cth.error ? (escf.error ? '0' : escf.condition.distance) : cth.condition.distance) : ccw.condition.distance}}月
        </p>
        <p>行驶里程: {{ccw.error ? (cth.error ? (escf.error ? '0' : escf.condition.selectedMonth) : cth.condition.selectedMonth) : ccw.condition.selectedMonth}}万公里</p>
      </div>
    </div>
    <div class="bottomMsg">
      <div class="tabs">
        <ul>
          <li :class="{'active': excellent}" @click="switchType(1)">车况优秀</li>
          <li :class="{'active': good}" @click="switchType(2)">车况一般</li>
          <li :class="{'active': common}" @click="switchType(3)">车况较差</li>
        </ul>
      </div>
      <div class="result-content">
        <div class="title">
          <ul>
            <li></li>
            <li>车虫网</li>
            <li>车300</li>
            <li>二手车之家</li>
          </ul>
        </div>
        <div class="res-msg">
          <ul v-if="excellent">
            <li>预估价:</li>
            <li>{{ccw.error ? '暂无' : ccw.maxPrice + '万'}}</li>
            <li>{{cth.error ? '暂无' : cth.maxPrice + '万'}}</li>
            <li>{{escf.error ? '暂无' : escf.maxPrice + '万'}}</li>
          </ul>
          <ul v-if="good">
            <li>预估价:</li>
            <li>{{ccw.error ? '暂无' :ccw.middlePrice + '万'}}</li>
            <li>{{cth.error ? '暂无' : cth.middlePrice + '万'}}</li>
            <li>{{escf.error ? '暂无' : escf.middlePrice + '万'}}</li>
          </ul>
          <ul v-if="common">
            <li>预估价:</li>
            <li>{{ccw.error ? '暂无' :ccw.minPrice + '万'}}</li>
            <li>{{cth.error ? '暂无' : cth.minPrice + '万'}}</li>
            <li>{{escf.error ? '暂无' : escf.minPrice + '万'}}</li>
          </ul>
          <ul class="bb">
            <li>新车价:</li>
            <li>{{ccw.error ? '暂无' :ccw.newPrice + '万'}}</li>
            <li>{{cth.error ? '暂无' : cth.newPrice + '万'}}</li>
            <li>{{escf.error ? '暂无' : escf.newPrice + '万'}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        excellent: true,
        good: false,
        common: false,
        ccw: '',
        cth: '',
        escf: ''
      }
    },
    methods: {
      switchType (type) {
        switch (type) {
          case 1:
            this.excellent = true
            this.good = false
            this.common = false
            break;
          case 2:
            this.excellent = false
            this.good = true
            this.common = false
            break;
          case 3:
            this.excellent = false
            this.good = false
            this.common = true
            break;
        }
      }
    },
    props: {
      curCcw: {
        type: Object,
        default: function () {
          return {}
        }
      },
      curCth: {
        type: Object,
        default: function () {
          return {}
        }
      },
      curEscf: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    mounted () {
      if (!this.curCcw.error) {
        if (this.curCcw.condition.selectedProvince.name === this.curCcw.condition.selectedCity.name) {
          this.curCcw.condition.selectedCity.name = ''
        }
      }
       if (!this.curCth.error) {
        if (this.curCth.condition.selectedProvince.name === this.curCth.condition.selectedCity.name) {
          this.curCth.condition.selectedCity.name = ''
        }
      }
       if (!this.curEscf.error) {
        if (this.curEscf.condition.selectedProvince.name === this.curEscf.condition.selectedCity.name) {
          this.curEscf.condition.selectedCity.name = ''
        }
      }
      this.ccw = this.curCcw
      this.cth = this.curCth
      this.escf = this.curEscf
      // console.log(this.ccw)
      // console.log(this.cth)
      // console.log(this.escf)
    }
  }
</script>


<style lang="less">
  @import './resultPanel.less';
</style>

